<template>
	<view class="" :style="{height: menuTopHeight + 'px'}"></view>
	<view class="menu-box" :style="{height: menuHeight + 'px'}">
		<u-icon name="arrow-left" color="#222222" size="20" @click="goBack"></u-icon>
		<view class="navigate-title">购物车</view>
		<view class="delete" @tap="showCancelPop">删除</view>
	</view>
	<view class="container">
		<!-- 购物车列表 -->
		<view class="car-list">
			<u-checkbox-group v-model="checkboxValue" placement="column">
				<view :style="{marginBottom: i == (carList.length - 1) ? '0' : '60rpx'}" class="car-item"
					v-for="(item, i) in carList" :key="i">
					<view class="check">
						<u-checkbox activeColor="#516DDB" shape="circle" :name="i">
						</u-checkbox>
					</view>
					<view class="img-box">
						<u-image radius="20rpx" width="170rpx" height="155rpx" src="/static/logo.png"></u-image>
					</view>
					<view class="car-content">
						<view class="title">
							吴玉源糕点传统手工芡实糕温州特产美食八珍糕红豆薏吴玉源糕点传统手工芡实糕温州特产美食八珍糕红豆薏吴玉源糕点传统手工芡实糕温州特产美食八珍糕红豆薏
						</view>
						<view class="price-num">
							<view class="price-box">
								<text class="yuan">￥</text>
								<text class="price">18.32</text>
							</view>
							<view class="num-box">
								<u-number-box min="1" v-model="number">
									<template #minus>
										<view class="minus">
											<u-image width="48rpx" height="48rpx"
												src="/static/images/a66.png"></u-image>
										</view>
									</template>
									<template #input>
										<text style="width: 50px;text-align: center;" class="input">{{number}}</text>
									</template>
									<template #plus>
										<view class="plus">
											<u-image width="48rpx" height="48rpx"
												src="/static/images/a67.png"></u-image>
										</view>
									</template>
								</u-number-box>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<!-- 九宫格 -->
		<view class="grid-wrap">
			<view class="title-box">
				<u-image width="34rpx" height="30rpx" src="/static/images/a64.png"></u-image>
				<view class="title">防积食助消化</view>
				<u-image width="34rpx" height="30rpx" src="/static/images/a64.png"></u-image>
			</view>
			<u-grid :border="false" col="3" @click="goStoreDetail">
				<u-grid-item v-for="(item, i) in 9" :key="i">
					<view class="commodity-item grid-bottom">
						<view class="img-box">
							<u-image width="220rpx" height="200rpx" src="/static/logo.png"></u-image>
						</view>
						<view class="content-box">
							<view class="title">四川爱媛3四川爱媛3四川爱媛38</view>
							<view class="price-box">
								<view class="price">￥139.9</view>
								<view class="icon-box">
									<u-image width="44rpx" height="44rpx" src="/static/images/a63.png"></u-image>
								</view>
							</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>

	<!-- 底部结算按钮 -->
	<view class="buy-wrap">
		<view class="buy-btn-wrap">
			<view class="all-select">
				<u-checkbox shape="circle" activeColor="#516DDB" label="全选" @change="allSelectChange"></u-checkbox>
			</view>
			<view class="left">
				<view class="name">合计</view>
				<view class="price-box">
					<text class="yuan">￥</text>
					<text class="price">1231.12</text>
				</view>
			</view>
			<view class="right">
				<u-button throttleTime="1000" :customStyle="{height: '80rpx', letterSpacing: '.1rem', width: '250rpx'}"
					:hairline="false" type="mini" shape="circle" color="#516DDB" @click="goSuccess">去结算</u-button>
			</view>
		</view>
	</view>

	<!-- 删除模态框 -->
	<u-modal showCancelButton :show="cancelPop" title="删除商品" @cancel="cancelPop = false" @confirm="cancelPop = false"
		confirmColor="#516DDB">
		<view class="tip">是否要确定删除该商品？</view>
	</u-modal>
</template>

<script setup>
	import {
		useHeight
	} from '@/hooks/useMenuHeight'
	const {
		menuHeight,
		menuTopHeight
	} = useHeight()
	const cancelPop = ref(false)
	const checkboxValue1 = reactive([]);
	const number = ref(1)
	const carList = ref([{}, {}, {}, {}, {}])

	// 删除
	const showCancelPop = () => {
		cancelPop.value = true
	}
	// 全选
	const allSelectChange = e => {
		console.log(e);
	}
	// 支付成功
	const goSuccess = () => {
		uni.navigateTo({
			url: '/mine/reservation/success'
		})
	}
	// 返回
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.menu-box {
		padding-left: 26rpx;
		display: flex;
		// align-items: flex-end;
		align-items: center;

		.navigate-title {
			color: #222222;
			font-size: 36rpx;
			margin-left: 18rpx;
		}

		.delete {
			margin-left: 40rpx;
			color: #666666;
			font-size: 28rpx;
		}
	}

	.container {
		padding: 0 26rpx 200rpx;
	}

	.car-list {
		padding: 40rpx 26rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 52rpx;

		.car-item {
			// margin-bottom: 60rpx;
			@include between(100%);

			.img-box {
				margin: 0 16rpx 0 6rpx;
			}

			.car-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 155rpx;

				.title {
					color: #333333;
					@include more-over-ellip(2);
				}

				.price-num {
					@include between(100%);

					.price-box {
						color: #F55726;

						.yuan {
							font-size: 28rpx;
						}

						.price {
							font-weight: bold;
							font-size: 40rpx;
						}
					}
				}
			}
		}
	}

	.grid-wrap {
		margin-top: 40rpx;

		.title-box {
			@include center();
			color: #516DDB;
			font-size: 36rpx;
			margin-bottom: 30rpx;

			.title {
				margin: 0 48rpx;
			}
		}

		.grid-bottom {
			margin-bottom: 30rpx;
		}

		.commodity-item {
			position: relative;
			width: 220rpx;
			// height: 330rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-right: 20rpx;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(102, 102, 102, 0.16);
			z-index: 99;

			.content-box {
				padding: 8rpx 8rpx 15rpx;

				.title {
					color: #666666;
					@include over-ellip();
					margin-bottom: 12rpx;
				}

				.price-box {
					@include between(100%);

					.price {
						font-size: 28rpx;
						color: #F55726;
					}

					.icon-box {
						@include center(44rpx, 44rpx);
						background: #516DDB;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.buy-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-top: 21rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
		box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.1);
		background: #FFFFFF;
		z-index: 99;

		.buy-btn-wrap {
			@include between(100%);

			.left {
				display: flex;
				align-items: center;

				.name {
					color: #000000;
					margin-right: 14rpx;
				}

				.price-box {
					color: #333333;

					.price {
						font-weight: bold;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>